<template>
    <div>
        <a-modal v-model="visible"
                 :title="title"
                 @ok="handleOk"
                 @cancel="cancel"
                 centered
                 width="40em"
                 :cancelText="cancelText"
                 :okText="okText">
            <a-form-model
                    ref="form"
                    :model="stuRecord"
                    :rules="rules"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span:  16}"
            >
                <a-form-model-item label="账号" prop="account">
                    <a-tooltip placement="topLeft" title="格式为：65132">
                        <a-input type="number" placeholder="格式为：1805010301" v-model="stuRecord.account"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="学号" prop="stuNumber">
                    <a-tooltip placement="topLeft" title="格式为：1805010101">
                        <a-input type="number" placeholder="格式为：1805010301" v-model="stuRecord.stuNumber"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="学校" prop="school">
                    <a-tooltip placement="topLeft" title="格式为：hnust">
                        <a-input placeholder="格式为：1805010301" v-model="stuRecord.school"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="密码" prop="password">
                    <a-tooltip placement="topLeft" title="格式为：1234567890">
                        <a-input placeholder="格式为：123456" v-model="stuRecord.password"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="姓名" prop="name">
                    <a-tooltip placement="topLeft" title="格式为：姓名">
                        <a-input placeholder="格式为：123456" v-model="stuRecord.name"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="昵称" prop="alias">
                    <a-tooltip placement="topLeft" title="格式为：昵称">
                        <a-input placeholder="格式为：123456" v-model="stuRecord.alias"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="班级" prop="className">
                  <a-cascader
                      :options="options"
                      :load-data="loadData"
                      placeholder="请选择班级"
                      change-on-select
                      v-model="stuRecord.className"
                      @change="onChange"
                  />
<!--                    <a-select show-search placeholder="" v-model="stuRecord.className"  default-value="" style="width: 24.3em">-->
<!--                        <a-select-option :value="stuClass[index].classId" v-for="(item,index) in stuClass" :key="item.classId">-->
<!--                            {{item.className}}-->
<!--                        </a-select-option>-->
<!--                    </a-select>-->
                </a-form-model-item>
                <a-form-model-item label="邮箱" prop="email">
                    <a-tooltip placement="topLeft" title="格式为：123456@qq.com">
                        <a-input type="email" placeholder="格式为：123456" v-model="stuRecord.email"/>
                    </a-tooltip>
                </a-form-model-item>
                <a-form-model-item label="电话" prop="phone">
                    <a-tooltip placement="topLeft" title="格式为：12345678910">
                        <a-input placeholder="格式为：123456" v-model="stuRecord.phone"/>
                    </a-tooltip>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
    import { mapState } from "vuex";
    const rules={
        account:[{ required: true, message: '请输入账号!',trigger: 'change'}],
        stuNumber:[{ required: true, message: '请输入学号!',trigger: 'change'}],
        password:[{ required: true, message: '请输入密码，最长10位',trigger: 'change', max: 10}],
        name:[{ required: true, message: '请输入名字!',trigger: 'change'}],
        school:[{ required: true, message: '请输入学校',trigger: 'change'}],
        alias:[{ required: true, message: '请输入昵称',trigger: 'change'}],
        className:[{ required: true, message: '请输入班级',trigger: 'change'}],
        email:[{ required: true, message: '请正确输入',trigger: 'change', type: 'email'}],
        phone:[{ required: true, message: '请正确输入',trigger: 'change'}]
    }
    export default {
        name: "addStudent",
        data() {
            return {
                rules,
                title: '添加学生',
                flag: false,
                visible:false,
                cancelText:'取消',
                okText:'确认',
                gradeData: [],
                showMajordata:true,  //默认命令选择框是禁用的
                classesRecord:{
                    classesId:'',
                    grade:'',
                    major:'',
                    number:'',
                },
                NianJi: [], // 年级
                majorData: ["计算机", "软件"], // 专业
                stuClass: [], // 班级
                stuCollege: [], // 专业
                stuRecord: {
                    account: '',
                    password: '',
                    school: '',
                    name: '',
                    stuNumber: '',
                    alias: '',
                    className:[],
                    college: '',
                    phone: '',
                    email: ''
                },
              options: [],
            }
        },
        methods: {
            //表格编辑特定班级
            showModel(){
                this.visible=true;//显示弹框
            },
            //确定时回调
            handleOk(){
                // this.visible=false;
                //新增
                this.$refs.form.validate(value=>{
                    if(value){
                      console.log(value)
                        let data={
                          account: this.stuRecord.account,
                          password: this.stuRecord.password,
                          school: this.stuRecord.school,
                          name: this.stuRecord.name,
                          stuNumber: this.stuRecord.stuNumber,
                          alias: this.stuRecord.alias,
                          className: this.stuRecord.className[2],
                          college: this.stuRecord.college,
                          phone: this.stuRecord.phone,
                          email: this.stuRecord.email
                        }
                        // console.log("添加学生",data)className中放的是classId，即班级Id
                        this.$store.dispatch('classes/addStudent',{token:this.accessState.token,student:data, collegeId:this.accessState.collegeId})
                            .then(data=>{
                                // console.log("添加返回", data)
                                if(data.code === 1){
                                    this.$message.success("添加成功");
                                    this.visible=false;
                                    this.$refs.form.resetFields();
                                    this.$emit("get")
                                }else{
                                    this.$message.error("添加失败");
                                }
                        }).catch(err=>{
                            this.$message.error(err.msg);
                        });
                    }else {
                        this.$message.error("请正确填写表单");
                    }
                })
            },
            //取消时回调
            cancel(){
                this.visible=false;
                this.$refs.form.resetFields();
                // this.showMajordata = true;
            },

          onChange(value) {
            console.log(value);
          },
          //根据年纪获取专业
          getMajors(targetOption){
            this.$store.dispatch('user/getMajors',{
              token:this.accessState.token,
              collegeId:this.accessState.collegeId,
              grade:targetOption.value
            }).then(res=>{

              let list = [];
              res.data.forEach(item=>{
                list.push({
                  value: item,
                  label: item,
                  isLeaf: false,
                })
              });
              targetOption.loading=false;
              targetOption.children=list;
              this.options = [...this.options];
            }).catch(error=>{
              this.$message.error(error)
            })
          },
          //根据年纪专业获取班级
          getClassNumbers(selectedOptions){
            const targetOption = selectedOptions[selectedOptions.length - 1];
            const targetOptionbefore = selectedOptions[selectedOptions.length - 2];
            this.$store.dispatch('user/getClassNumbersNew',{
              token:this.accessState.token,
              collegeId:this.accessState.collegeId,
              grade:targetOptionbefore.value,
              major:targetOption.value
            }).then(res=>{
              let list = [];
              res.data.forEach(item=>{
                list.push({
                  value: item["cla_id"],
                  label: item["cla_number"]+"班",
                })
              });
              targetOption.loading=false;
              targetOption.children=list;
              this.options = [...this.options];
            }).catch(error=>{
              this.$message.error(error)
            })
          },
          loadData(selectedOptions) {
            const targetOption = selectedOptions[selectedOptions.length - 1];
            if (selectedOptions.length==1){
              targetOption.loading = true;
              this.getMajors(targetOption);
            }else {
              targetOption.loading = true;
              this.getClassNumbers(selectedOptions);
            }
          },
        },
        created() {
            //获取年纪
            this.$store.dispatch('user/getGrades',{
              token:this.accessState.token,
              collegeId:this.accessState.collegeId
            }).then(res=>{
              let list = [];
              res.data.forEach(item=>{
                list.push({
                  value: item,
                  label: item,
                  isLeaf: false,
                })
              })
              this.options=list;
            }).catch(error=>{
              this.$message.error(error)
            })
            //获取班级
            // this.$store.dispatch('courseGroup/courseGroupGetClasses',{
            //     token:this.accessState.token,
            //     collegeId:this.accessState.collegeId
            // }).then(()=>{
            //     this.stuClass=this.courseGroupState.classes
            // }).catch(error=>{
            //     this.$message.error(error)
            // })
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access',
                'courseGroupState':'courseGroup'
            })
        }
    }
</script>

<style scoped>
</style>
